<template>
  <x-input
    class="mobile-com-type-picker"
    title="类型"
    placeholder="请输入类型"
    :show-clear="false"
    v-model="type">
    <popup-picker
      class="picker"
      title="类型选择"
      v-model="selType"
      slot="right-full-height"
      @on-change="change"
      :data="dataArr"/>
  </x-input>
</template>

<script>
  import { XInput, XButton, PopupPicker, Group } from 'vux'
  export default {
    name: "MobileComTypePicker",
    components: {
      XButton, XInput, PopupPicker, Group
    },
    props: {
      classModel: {
        type: Function,
        default() {}
      }
    },
    data() {
      return {
        /**
         * Picker 数据数组
         */
        dataArr: [],
        /**
         * Picker 选中的数据
         */
        selType: [],
        /**
         *
         */
        type: null
      }
    },
    methods: {
      change(data) {
        this.type = data[0]
      },
      /**
       * 获取学习类型列表数据
       */
      getTypes() {
        this.classModel.loadTypes().w_then((dataArr) => {
          this.dataArr.push(dataArr)
        })
      },
      /**
       * 设置类型
       * @param type
       */
      setType(type) {
        this.type = type
      },
      /**
       * 获取类型
       * @returns {null}
       */
      getType() {
        return this.type
      }
    },
    mounted() {
      this.getTypes()
    }
  }
</script>

<style lang="scss">
.mobile-com-type-picker {
  padding: 0 15px;
  .weui-cell {
    background-color: rgba(0,0,0,0);
  }
  .vux-popup-picker-value {
    display: none;
  }
}
</style>
